<style scoped>
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }

  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }

  .rj-cell {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
  }

  .rj-cell.max span {
    font-size: 16px;
    padding-right: 20px;
  }

  .rj-cell label {
    color: #333;
    font-size: 14px;
  }

  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }

  .rj-cell.note {
    width: 100%;
  }

  .rj-cell.note label {
    float: left;
  }

  .rj-cell.note span {
    width: 80%;
    display: inline-block;
  }

  .weui-panel {
    background: #eee;
  }

  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }

  .weui-panel {
    margin-top: 0;
    text-align: left;
  }

  .attachimg {
    /*width: 100%;*/
  }

  .tit label, .tit span {
    font-size: 16px;
  }

  .tit label {
    padding-right: 20px;
  }

  .weui-panel.weui-panel_access {
    padding-bottom: 10px;
  }

  .weui-panel__bd:not(.base) {
    width: auto;
    padding: 0 1% 2px 1%;
  }

  .rj-cont-tit:not(.base) {
    border-radius: 5px;
  }

  .weui-cell {
    background: #fff;
  }

  .weui-cells__title {
    text-align: left;
    background: #eee;
  }

  .oitem {
    padding: 3px;
  }

  #acts span {
    font-size: 14px;
  }

  .weui-label {
    text-align: left;
  }

  .weui-media-box {
    text-align: left;
  }

  .weui-panel {
    background: #eee;
  }

  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }

  .weui-panel {
    margin-top: 0;
    text-align: left;
  }

  .hd .weui-grid.js_grid {
    font-weight: 600;
  }

  .weui-grid.js_grid {
    width: 25%;
    padding: 10px 1px;
  }

  /*.weui-grid.fir {*/
  /*  width: 20%;*/
  /*}*/
  /*.weui-grid.sec {*/
  /*  width: 15%;*/
  /*}*/
  /*.weui-grid.thr {*/
  /*  width: 20%;*/
  /*}*/
  /*.weui-grid.fou {*/
  /*  width: 15%;*/
  /*}*/
  /*.weui-grid.fiv {*/
  /*  width: 15%;*/
  /*}*/
  .weui-grid__label {
    text-overflow: initial;
  }

  /*.view-wrap {*/
  /*  background: #eee;*/
  /*}*/
  .section {
    width: auto;
    margin: 5px;
    border-radius: 5px;
    text-align: left;
    overflow: hidden;
  }
  .itemSection {
    background: #fafafa;
    margin: 3px;
  }
  .itemTit {
    color: #999;
    font-size: 12px;
    margin-left: 15px;
  }
  .rj-edit-em {
    font-size: 18px;
    padding-right: 8px;
    font-style: normal;
  }
  .rj-edit-em.red {
    color: red;
  }
</style>
<template>
  <div class="comon" style="background: #eee;">
    <div
      style="height: 50px; line-height: 50px; background: #fff; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      采收订单详情
      <a href="javascript:" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px"/>
      </a>
    </div>
    <!--    主表信息-->
    <div class="weui-form-preview" style="background: #fff;">
      <div class="weui-form-preview__hd">
        <label class="weui-form-preview__label">编号</label>
        <em class="weui-form-preview__value">{{order.code}}</em>
      </div>
      <div class="weui-form-preview__bd">
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">采收合同</label>
          <span class="weui-form-preview__value">{{contract.name + '[' + contract.code + ']'}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">采收主体</label>
          <span class="weui-form-preview__value">{{order.orgName}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">供应商</label>
          <span class="weui-form-preview__value">{{order.supplierName || '无'}}</span>
        </div>
        <div class="weui-form-preview__item" v-if="order.arealand">
          <span class="weui-form-preview__value">{{order.arealand}}</span>
          <label class="weui-form-preview__label">地块</label>
        </div>
        <div class="weui-form-preview__item" v-if="order.carcode">
          <label class="weui-form-preview__label">地块</label>
          <span v-if="order.carcode == 'SYSTEM001'" class="weui-form-preview__value">手动生成订单</span>
          <span v-else class="weui-form-preview__value"><em class="rj-edit-em red">{{order.carcode}}</em>{{order.drivername}}&nbsp;&nbsp;{{order.driverphone}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">货品</label>
          <span class="weui-form-preview__value">{{order.variety + ' ' + order.specification}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">采收类型</label>
          <span class="weui-form-preview__value">{{order.typeName}}</span>
        </div>
        <div class="weui-form-preview__item" v-if="order.harvest == 2">
          <label class="weui-form-preview__label">库房</label>
          <span class="weui-form-preview__value">{{order.storeroom}}  {{order.storehouse}}</span>
        </div>
        <template v-if="order.type == 2">
          <div class="weui-form-preview__item">
            <label class="weui-form-preview__label">合同单价</label>
            <span class="weui-form-preview__value">{{attachUnit(order.price, '元/吨')}}</span>
<!--            <p v-if="dianfen" style="font-size: 12px;text-align: left;margin-right: 10px">淀粉含量： {{dianfen}}</p>-->
          </div>
        </template>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">支付状态</label>
          <span class="weui-form-preview__value">{{order.paystatusName}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">付款方式</label>
          <span class="weui-form-preview__value">{{order.setlwgtype == 1 ? '装车付' : '验收付'}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">状态</label>
          <span class="weui-form-preview__value">{{order.statusName}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">备注</label>
          <span class="weui-form-preview__value">{{order.remark}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">操作人</label>
          <span class="weui-form-preview__value">{{order.operator + ' - ' + order.department}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">创建时间</label>
          <span class="weui-form-preview__value">{{order.createtime}}</span>
        </div>
        <div class="weui-form-preview__item" v-if="order.files && order.files.length > 0">
          <label class="weui-form-preview__label">附件</label>
          <a v-for="(item, index) in order.files" :href="item.url">
            <span class="weui-form-preview__value">{{item.imagename}}</span>
          </a>
        </div>
      </div>
    </div>
    <template >
      <div class="weui-panel__hd" style="text-align: left;">质检信息
        <i v-if="qaform" class="weui-icon-info-circle" @click="toQainfo()" style="float: right;font-size: 22px;"></i>
      </div>
      <div class="weui-panel__bd section" style="background: #fff;">
        <div class="rj-cell max">
          <label>质检标准：</label>
          <span>{{order.qaname}}</span>
        </div>
<!--        <div class="rj-cell max">-->
<!--          <label>扣杂方式：</label>-->
<!--          <span>{{contract.deducttypeName}}</span>-->
<!--        </div>-->
        <div class="rj-cell max">
          <label>扣杂标准：</label>
          <span>{{order.isdiscountName}}</span>
        </div>
        <template v-if="contract.deducttype == 1">
          <div class="rj-cell max">
            <label>合同扣杂率：</label>
            <span>{{contract.discountrate + '%'}}</span>
          </div>
          <div class="rj-cell max">
            <label>质检扣杂率：</label>
            <span>{{qaform ? qaform.deductrate + '%' : '未质检'}}</span>
          </div>
          <div v-if="order.deductRateByHand" class="rj-cell max">
            <label>手工扣杂率：</label>
            <span>{{order.deductRateByHand + '%'}}</span>
          </div>
          <div class="rj-cell max" v-if="order.ratend || order.ratend === 0">
            <label>最终扣杂率：</label>
            <span>{{order.ratend + '%'}}</span>
          </div>
          <div class="rj-cell max" v-if="order.type == 2">
            <label>淀粉含量：</label>
            <span>{{dianfen}}</span>
          </div>
        </template>
        <template v-if="contract.deducttype == 2">
          <div class="rj-cell max" v-if="qaform.soilchkrate">
            <label>土杂率：</label>
            <span>{{qaform.soilchkrate + '%'}}</span>
          </div>
          <div class="rj-cell max" v-if="order.isdiscount != 6 && qaform.unqualifiedchkrate">
            <label>不合格率：</label>
            <span>{{qaform.unqualifiedchkrate + '%'}}</span>
          </div>
          <div class="rj-cell max" v-if="order.isdiscount == 6 && order.acceptStatus">
            <label>质检结果：</label>
            <span>{{order.acceptStatus == 1 ? '合格' : '不合格'}}</span>
            <span style="color: #0BB20C;font-size: 12px;" @click="viewQaform">详情 >></span>
          </div>
        </template>
        <div v-if="qaform" class="rj-cell max">
          <label>质检人员：</label>
          <span>{{qaform.operatorname}}</span>
        </div>
        <div v-if="qaform" class="rj-cell max">
          <label>质检时间：</label>
          <span>{{qaform.createdate}}</span>
        </div>
      </div>
    </template>
    <template v-if="order.actualSettl" >
      <div class="weui-panel__hd" style="text-align: left;">结算信息</div>
      <div class="weui-panel__bd section" style="background: #fff;margin-bottom: 50px;">
        <template v-if="contract.deducttype == 1">
<!--          <div class="rj-cell max" v-if="order.type == 2">-->
<!--            <label>淀粉单价：</label>-->
<!--            <span>{{order.unitPrice + ' 元/淀粉含量*吨'}}</span>-->
<!--          </div>-->
          <div class="rj-cell max">
            <label>合同单价：</label>
            <span>{{order.price + ' 元/吨'}}</span>
          </div>
        </template>
        <template v-if="contract.deducttype == 2">
          <div class="rj-cell max" style="width: 100%;display: flex;">
            <label style="display: inline-flex;">合同单价：</label>
            <div style="width: 70%;">
              <p>
                <label>合格薯：</label>
                <span>{{passPrice ? passPrice : order.price + ' 元/吨'}}</span>
              </p>
              <p>
                <label>淀粉薯：</label>
                <span>{{unpassPrice + ' 元/吨'}}</span>
              </p>
            </div>
          </div>
        </template>
        <div class="rj-cell max" v-if="order.rweight">
          <label>拉货重量：</label>
          <span>{{order.rweight}} 吨</span>
        </div>
        <template v-if="order.netWeight > 0">
          <div class="rj-cell max">
            <label>毛重：</label>
            <span>{{order.hweight}} 吨</span>
          </div>
          <div class="rj-cell max">
            <label>入库重量：</label>
            <span>{{order.netWeight}} 吨</span>
          </div>
          <div class="rj-cell max">
            <label>每件毛重：</label>
            <span>{{order.wghtperpkg}} Kg</span>
          </div>
          <div class="rj-cell max">
            <label>包装物重量：</label>
            <span>{{order.pkgwgh}} Kg</span>
          </div>
        </template>
        <div class="rj-cell max">
          <label>结算重量：</label>
          <span>{{order.weight}} 吨</span>
        </div>
        <div class="rj-cell max" v-if="order.settlement">
          <label>结算金额：</label>
          <span>{{order.settlement}} 元</span>
          <template v-if="contract.deducttype == 2">
            <p v-if="order.isdiscount != 6" style="font-size: 12px;text-align: left;margin-right: 10px">= 合格薯单价 * 合格薯重量 * (1 - 土杂率 - 不合格率) + 不合格薯单价 * 不合格薯重量 * 不合格率</p>
            <p v-if="order.isdiscount == 6" style="font-size: 12px;text-align: left;margin-right: 10px">= (合同单价 + 奖励金额 - 扣罚金额) * 结算重量</p>
          </template>
          <template v-if="contract.deducttype == 1">
            <p style="font-size: 12px;text-align: left;margin-right: 10px">= 合同单价 * (1 - 最终扣杂率) * 结算重量</p>
          </template>
        </div>
      </div>
    </template>
    <!--    审批记录-->
    <SalesOperationLogs7 :orderid="id" :srguid="order.srguid" :departid="order.departid" :flowid="flowid"></SalesOperationLogs7>
    <!--    </div>-->
    <!--  </div>-->
    <CommentBom v-if="isReady" :flowid="flowid" :nodeid="nodeid" :id="id" :srguid="order.srguid" :departid="order.departid" :model="order" navgateUrl="/harvest2/forder/list" ></CommentBom>
  </div>
</template>

<script>
  import SalesOperationLogs7 from '@/components/common/SalesOperationLogs7'
  import CommentBom from '@/components/common/CommentBom'

  export default {
    name: 'ViewForder2',
    data() {
      return {
        flowid: 40,
        userid: localStorage.userId,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
        id: '',
        isReady: false,
        order: {},
        contract: '',
        baseInfo: '',
        qaform: '',
        dianfen: '',
      }
    },
    components: {
      SalesOperationLogs7,
      CommentBom
    },
    created() {
      window.addEventListener('setItem', () => {
        this.openid = localStorage.getItem('openid');
        this.userid = localStorage.getItem('userId');
      })
    },
    mounted() {
      this.id = this.$route.query.id;
      //图片浏览器
      $('.weui-panel').on('click', '.uploaderFiles .attachimg', function () {
        var num = $(this).parent().children().not(".exp").length;
        var imgArr = [];
        for (var i = 0; i < num; i++) {
          imgArr.push($(this).parent().find('.attachimg').eq(i).data('img'));
        }
        var pnum = $(this).parent().find('.exp').length;
        var index = pnum > 0 ? $(this).index() - pnum : $(this).index();
        var pb = $.photoBrowser({
          items: imgArr,
          initIndex: index
        });
        pb.open();
      });
      this.getorder(this.id);
    },
    methods: {
      toQainfo: function() {
        // const path = encodeURIComponent(location.href);
        // location.href = `/harvest2/Qarecord!detail.action?s=${this.baseInfo.guid}&door=fodetail&fromurl=${path}`;
        this.$router.push({path: '/harvest2/forder/Qarecord', query: {id: this.order.id, guid: this.order.guid}});
      },
      packUnit: function(unit, currency) {
        return unit != undefined && unit != '' ? currency == 2 ? '美元/' + unit : '元/' + unit : '';
      },
      getorder: async function (id) {
        await this.axios({
          method: 'get',
          url: `/prod-api/harvest/freightorder/${id}`,
        }).then(response => {
          if (response.data.code == 200) {
            this.baseInfo = response.data.data;
            this.order = this.baseInfo.order || {};
            this.contract = this.baseInfo.contract || {};
            this.qaform = this.baseInfo.qaform || '';
            if (this.order.type == 2 && this.order.status >= 35) {
              this.getDianfen();
            }
            // this.baseItems = response.data.items;
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastError('系统错误');
          }
          this.isReady = true;
        });
      },
      getDianfen: function () {
        this.axios({
          method: 'get',
          url: `/prod-api/harvest/qaresult/getQaResultWithType`,
          params: {guid: this.order.guid, type: 4}
        }).then(response => {
          if (response.data.code == 200) {
            this.dianfen = response.data.data;
          }
        });
      }
    }
  }
</script>
